---
title: アイコン
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

アプリ全体で使用されるアイコンの一覧。

## Tabler Icons

We use Tabler icons for React throughout the app.

<Tabs>

<Tab title="Installation"><br/>

```
yarn add @tabler/icons-react
```

</Tab>

<Tab title="Props">

各アイコンをコンポーネントとしてインポートできます。 Here's an example: <br /> Here's an example: <br />

```jsx
import { IconArrowLeft } from "@tabler/icons-react";

export const MyComponent = () => {
  return <IconArrowLeft color="red" size={48} />;
};
```

</Tab>

<Tab title="Props">

| プロパティ | タイプ    | 説明                  | デフォルト        |
| ----- | ------ | ------------------- | ------------ |
| サイズ   | 数      | アイコンの高さと幅（ピクセル単位）   | 24           |
| カラー   | string | アイコンの色              | currentColor |
| ストローク | 数      | アイコンのストローク幅（ピクセル単位） | 2            |

</Tab>

</Tabs>

## カスタムアイコン

Tablerアイコンに加えて、アプリにはいくつかのカスタムアイコンも使用されています。

### アイコンアドレス帳

アドレス帳のアイコンを表示します。

<Tabs>

<Tab title="Usage">

```jsx
import { IconAddressBook } from 'twenty-ui/display';

export const MyComponent = () => {
  return <IconAddressBook size={24} stroke={2} />;
};
```

</Tab>

<Tab title="Props">

| プロパティ | タイプ | 説明                  | デフォルト |
| ----- | --- | ------------------- | ----- |
| サイズ   | 数   | アイコンの高さと幅（ピクセル単位）   | 24    |
| ストローク | 数   | アイコンのストローク幅（ピクセル単位） | 2     |

</Tab>

</Tabs>
